<script setup lang='ts'>
import ProfitAnalysis from './components/ProfitAnalysis.vue'

const colorList = [{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: 'rgba(51,192,205,0.01)', // 0% 处的颜色
  }, {
    offset: 1,
    color: 'rgba(51,192,205,0.57)', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}, {
  type: 'linear',
  x: 1,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: 'rgba(115,172,255,0.02)', // 0% 处的颜色
  }, {
    offset: 1,
    color: 'rgba(115,172,255,0.67)', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}, {
  type: 'linear',
  x: 1,
  y: 0,
  x2: 0,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(158,135,255,0.02)', // 0% 处的颜色
  }, {
    offset: 1,
    color: 'rgba(158,135,255,0.57)', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}, {
  type: 'linear',
  x: 0,
  y: 1,
  x2: 0,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(252,75,75,0.01)', // 0% 处的颜色
  }, {
    offset: 1,
    color: 'rgba(252,75,75,0.57)', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}, {
  type: 'linear',
  x: 1,
  y: 1,
  x2: 1,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(253,138,106,0.01)', // 0% 处的颜色
  }, {
    offset: 1,
    color: '#FDB36ac2', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}, {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(254,206,67,0.12)', // 0% 处的颜色
  }, {
    offset: 1,
    color: '#FECE4391', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
},
// 绿色
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(122,224,146,0.12)', // 0% 处的颜色
  }, {
    offset: 1,
    color: '#7ae092', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}]
const colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']
const tpdata = [{
  name: '审批',
  value: 22,
}, {
  name: '普批',
  value: 78,
}].sort((a, b) => {
  return b.value - a.value
})
const cindex = [1, 4]
const tpcolors = colorList.filter((v, i) => cindex.includes(i))
const tpcline = colorLine.filter((v, i) => cindex.includes(i))
function handdleData(data, piecolors) {
  return data.map((v, i) => {
    return {
      value: v.value,
      name: v.name,
      itemStyle: {
        color: piecolors[i],
      },
    }
  })
}
function getRich(colorLine) {
  const result = {}
  colorLine.forEach((v, i) => {
    result[`hr${i}`] = {
      backgroundColor: colorLine[i],
      borderRadius: 3,
      width: 3,
      height: 3,
      padding: [3, 3, 0, -12],
    }
    result[`a${i}`] = {
      padding: [-11, 6, -20, 6],
      color: colorLine[i],
      backgroundColor: 'transparent',
      fontSize: 12,
    }
  })
  return result
}
const tp = {
  series: [{
    type: 'pie',
    radius: '60%',
    center: ['50%', '50%'],
    clockwise: true,
    avoidLabelOverlap: true,
    label: {
      show: true,
      position: 'outside',
      formatter(params) {
        const name = params.name
        const percent = `${params.percent}%`
        const index = params.dataIndex
        return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
      },
      rich: getRich(tpcline),
    },
    itemStyle: {
      normal: {
        color(params) {
          return tpcolors[params.dataIndex]
        },
      },
    },
    data: handdleData(tpdata, tpcolors),
  }],
}

const yindex = [0, 3]
const ysdata = [{
  name: '未验收',
  value: 43,
}, {
  name: '已验收',
  value: 57,
}].sort((a, b) => {
  return b.value - a.value
})
const yscolors = colorList.filter((v, i) => yindex.includes(i))
const yscline = colorLine.filter((v, i) => yindex.includes(i))
const ys = {
  series: [{
    type: 'pie',
    radius: '60%',
    center: ['50%', '50%'],
    clockwise: true,
    avoidLabelOverlap: true,
    label: {
      show: true,
      position: 'outside',
      formatter(params) {
        const name = params.name
        const percent = `${params.percent}%`
        const index = params.dataIndex
        return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
      },
      rich: getRich(yscline),
    },
    itemStyle: {
      normal: {
        color(params) {
          return tpcolors[params.dataIndex]
        },
      },
    },
    data: handdleData(ysdata, yscolors),
  }],
}
const psdata = [{
  name: '未评审',
  value: 13,
}, {
  name: '已评审',
  value: 87,
}].sort((a, b) => {
  return b.value - a.value
})
const psindex = [2, 3]
const pscolors = colorList.filter((v, i) => psindex.includes(i))
const pscline = colorLine.filter((v, i) => psindex.includes(i))
const ps = {
  series: [{
    type: 'pie',
    radius: '60%',
    center: ['50%', '50%'],
    clockwise: true,
    avoidLabelOverlap: true,
    label: {
      show: true,
      position: 'outside',
      formatter(params) {
        const name = params.name
        const percent = `${params.percent}%`
        const index = params.dataIndex
        return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
      },
      rich: getRich(pscline),
    },
    itemStyle: {
      normal: {
        color(params) {
          return tpcolors[params.dataIndex]
        },
      },
    },
    data: handdleData(psdata, pscolors),
  }],
}
const jfdata = [{
  name: '未交付',
  value: 13,
}, {
  name: '已交付',
  value: 87,
}]
const jfindex = [6, 3]
const jfcolors = colorList.filter((v, i) => jfindex.includes(i))
const jfcline = colorLine.filter((v, i) => jfindex.includes(i))
const jf = {
  series: [{
    type: 'pie',
    radius: '60%',
    center: ['50%', '50%'],
    clockwise: true,
    avoidLabelOverlap: true,
    label: {
      show: true,
      position: 'outside',
      formatter(params) {
        const name = params.name
        const percent = `${params.percent}%`
        const index = params.dataIndex
        return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
      },
      rich: getRich(jfcline),
    },
    itemStyle: {
      normal: {
        color(params) {
          return tpcolors[params.dataIndex]
        },
      },
    },
    data: handdleData(jfdata, jfcolors),
  }],
}
</script>

<template>
  <div grid grid-cols-4 gap-3>
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <template #header>
        <div text-lg>
          审批事项发生率
        </div>
      </template>
      <Echart :options="tp" h-80 />
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <template #header>
        <div text-lg>
          方案评审有效性
        </div>
      </template>
      <Echart :options="ps" h-80 />
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <template #header>
        <div text-lg>
          验收数量的统计
        </div>
      </template>
      <Echart :options="ys" h-80 />
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <template #header>
        <div text-lg>
          交付质量统计
        </div>
      </template>
      <Echart :options="jf" h-80 />
    </el-card>
  </div>
  <ProfitAnalysis />
</template>

<style scoped lang='scss'>

</style>
